<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../lib/jquery-2.1.4.min.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h3 {
            color: red;
        }

        span {
            margin-right: 10px;
        }

        em {
            color: red;
        }

        .flex {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        .layui-row {
            box-sizing: border-box;
            padding: 20px 40px;
            margin: 0;
        }

        .layui-card {
            border: 1px solid #f2f2f2;
        }

        .layui-card-header {
            background-color: #f2f2f2;
            color: #000000;
        }

        .statistics {
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            flex-wrap: wrap;
            margin-top: 40px;
        }

        .layui-tab-title {
            border: none;
            display: flex;
            justify-content: center;
        }

        .flex-j-a {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .layadmin-backlog-body {
            position: relative;
        }

        .layadmin-backlog-body>button {
            position: absolute;
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>

<body>
    <!-- 用户总览、用户留存 -->
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户总览</div>
                <div class="layui-card-body" style="height: 180px;">
                    <form class="layui-form flex" action="">
                        <span>地区</span>
                        <select name="city" lay-verify="">
                            <option value="000">全国</option>
                            <option value="010">北京</option>
                            <option value="021">上海</option>
                            <option value="0571">杭州</option>
                        </select>
                    </form>
                    <!-- 统计 -->
                    <div class="statistics">
                        <div class="layadmin-backlog-body">
                            <h3>150</h3>
                            <p>今日新增</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>320</h3>
                            <p>昨日新增</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>2000</h3>
                            <p>本月新增</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>15000</h3>
                            <p>用户总数</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户留存</div>
                <div class="layui-card-body" style="height: 180px;">
                    <form class="layui-form flex" action="">
                        <span>地区</span>
                        <select name="city" lay-verify="">
                            <option value="000">全国</option>
                            <option value="010">北京</option>
                            <option value="021">上海</option>
                            <option value="0571">杭州</option>
                        </select>
                    </form>
                    <!-- 统计 -->
                    <div class="statistics">
                        <div class="layadmin-backlog-body">
                            <h3>150</h3>
                            <p>留存用户</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>320</h3>
                            <p>流失用户</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>15000</h3>
                            <p>回归流失用户数</p>
                        </div>
                        <div class="layadmin-backlog-body">
                            <h3>30%</h3>
                            <p>留存率</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 统计图 -->
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">新用户来源环形图</div>
                <div class="layui-card-body" style="height: 460px;">
                    <div class="layui-inline flex-j-a">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="laydate-start" placeholder="开始日期">
                        </div>
                        <div class="" style="margin: 4px 10px 0px 10px;">
                            -
                        </div>
                        <div class="layui-input-inline" style="margin-right: 10px;">
                            <input type="text" class="layui-input" id="laydate-end" placeholder="结束日期">
                        </div>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">查询</button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">导出</button>
                    </div>

                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">本周</li>
                                <li class="">本月</li>
                                <li class="">本年</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div id="main" style="width: 100%;height:400px;"></div>
                                </div>
                                <div class="layui-tab-item">本月</div>
                                <div class="layui-tab-item">本年</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户活跃数据统计图</div>
                <div class="layui-card-body" style="height: 460px;">
                    <div class="layui-inline flex-j-a">
                        <span>起始日期</span>
                        <div class="layui-input-inline" style="margin-right: 10px;">
                            <input type="text" class="layui-input" id="laydate-active" placeholder="开始日期">
                        </div>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">查询</button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">导出</button>
                    </div>

                    <div class="layui-card-body">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                            <ul class="layui-tab-title">
                                <li class="layui-this">7天前</li>
                                <li class="">30天前</li>
                                <li class="">1年前</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div id="seven" style="width: 100%;height:350px;"></div>
                                </div>
                                <div class="layui-tab-item">本月</div>
                                <div class="layui-tab-item">本年</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 转发量统计、活跃用户 -->
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">转发量统计</div>
                <div class="layui-card-body" style="height: 300px;">
                    <div class="layui-inline flex-j-a">
                        <form class="layui-form flex" action="" style="width: 120px;margin-right: 10px;">
                            <span style="width: 80px">地区</span>
                            <select name="city" lay-verify="">
                                <option value="000">全国</option>
                                <option value="010">北京</option>
                                <option value="021">上海</option>
                                <option value="0571">杭州</option>
                            </select>
                        </form>
                        <div class="flex">
                            <div class="layui-input-inline">
                                <input type="text" class="layui-input" id="laydate-forward-start" placeholder="开始日期">
                            </div>
                            <div class="" style="margin: 4px 10px 0px 10px;">
                                -
                            </div>
                            <div class="layui-input-inline" style="margin-right: 10px;">
                                <input type="text" class="layui-input" id="laydate-forward-end" placeholder="结束日期">
                            </div>
                            <button class="layui-btn layui-btn-radius layui-btn-primary">查询</button>
                        </div>
                    </div>
                    <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">本周</li>
                            <li class="">本月</li>
                            <li class="">本年</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <!-- 统计 -->
                                <div class="statistics">
                                    <div class="layadmin-backlog-body">
                                        <h3>140</h3>
                                        <p>店铺转发量</p>
                                        <button
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">店铺转发明细</button>
                                    </div>
                                    <div class="layadmin-backlog-body">
                                        <h3>320</h3>
                                        <p>转发用户数</p>
                                        <button
                                            class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">转发用户明细</button>
                                    </div>
                                    <div class="layadmin-backlog-body">
                                        <h3>500</h3>
                                        <p>查看用户数</p>
                                    </div>
                                    <div class="layadmin-backlog-body">
                                        <h3>268</h3>
                                        <p>邀请注册用户数</p>
                                    </div>
                                    <div class="layadmin-backlog-body">
                                        <h3 style="color: skyblue">15%</h3>
                                        <p>购买转化率</p>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">本月</div>
                            <div class="layui-tab-item">本年</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">活跃用户</div>
                <div class="layui-card-body" style="height: 300px;">
                    <div class="flex">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="laydate-lively-start" placeholder="开始日期">
                        </div>
                        <div class="" style="margin: 4px 10px 0px 10px;">
                            -
                        </div>
                        <div class="layui-input-inline" style="margin-right: 10px;">
                            <input type="text" class="layui-input" id="laydate-lively-end" placeholder="结束日期">
                        </div>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">查询</button>
                        <button class="layui-btn layui-btn-radius layui-btn-primary">导出表格</button>
                    </div>
                    <table id="usertab" lay-filter="usertab"></table>
                </div>
            </div>
        </div>
    </div>
    <!-- 交易统计 -->
    <div class="layui-row layui-col-space30">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">交易统计</div>
                <div class="layui-card-body" style="height: 400px;">
                    <div style="display: flex;justify-content: space-around;align-items: flex-start;">
                        <form class="layui-form" action="">
                            <div class="flex">
                                <span>地区</span>
                                <select name="city" lay-verify="">
                                    <option value="000">全国</option>
                                    <option value="010">北京</option>
                                    <option value="021">上海</option>
                                    <option value="0571">杭州</option>
                                </select>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="laydate-transaction-start"
                                        placeholder="开始日期">
                                </div>
                                <div class="" style="margin: 4px 10px 0px 10px;">
                                    -
                                </div>
                                <div class="layui-input-inline" style="margin-right: 10px;">
                                    <input type="text" class="layui-input" id="laydate-transaction-end"
                                        placeholder="结束日期">
                                </div>
                                <button class="layui-btn layui-btn-radius layui-btn-primary">查询</button>
                            </div>
                            <div class="statistics">
                                <div class="layadmin-backlog-body" style="width: 50%;">
                                    <p>本日交易金额</p>
                                    <h2>25000</h2>
                                    <p><em>+10%</em>同比上月</p>
                                    <button
                                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">交易明细</button>
                                </div>
                                <div class="layadmin-backlog-body" style="width: 50%;">
                                    <p>本日订单数量</p>
                                    <h2>200</h2>
                                    <p><em>-10%</em>同比上月</p>
                                </div>
                                <div class="layadmin-backlog-body" style="width: 50%;margin-top: 100px">
                                    <p>本日提现金额</p>
                                    <h2>1200</h2>
                                    <p><em>+10%</em>同比上月</p>
                                    <button
                                        class="layui-btn layui-btn-sm layui-btn-radius layui-btn-primary">提现明细</button>
                                </div>
                                <div class="layadmin-backlog-body" style="width: 50%;margin-top: 100px">
                                    <p>本日平台利润</p>
                                    <h2>5200</h2>
                                    <p><em>+10%</em>同比上月</p>
                                </div>
                            </div>
                        </form>
                        <!-- 右侧图表 -->
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief" style="width: 50%">
                            <ul class="layui-tab-title">
                                <li class="layui-this">本日</li>
                                <li class="">本周</li>
                                <li class="">本月</li>
                                <li class="">本年</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div id="trade" style="width: 100%;height:360px;"></div>
                                </div>
                                <div class="layui-tab-item">本周</div>
                                <div class="layui-tab-item">本月</div>
                                <div class="layui-tab-item">本年</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="../layui/layui.all.js"></script>
    <script src="./lmt.js"></script>
    <script src="./index.js"></script>
</body>

</html>